<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图标</title>
    <style>
    .box {
        background: url("./images/bg.png") no-repeat center;
        margin: 0 auto;
        width: 600px;
    }
    
    .comment {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 320px;
        height: 300px;
        border: 1px solid #2b669a;
    }
    
    .comment li {
        text-align: left;
        list-style: decimal;
        width: 100%;
        height: 20px;
        color: #000;
    }
    
    .controls {
        width: 95%;
        height: 60px;
        background: #525060;
        margin-top: 20px;
        margin-left: 20px;
        overflow: hidden;
    }
    
    .state {
        height: 100%;
        clear: both;
        margin: 0;
    }
    
    li {
        list-style: none;
        width: 80px;
        height: 100%;
        line-height: 60px;
        text-align: center;
        color: #fff;
    }
    
    ul > li:nth-of-type(1) {
        float: left;
    }
    
    ul > li:nth-of-type(2) {
        float: right;
        border-left: 1px solid #4b5176;
    }
    
    ul > li:nth-of-type(3) {
        float: right;
        border-left: 1px solid #4b5176;
    }
    </style>
</head>

<body>
    <!--标注-->
    <ol class="comment">
        注：
        <li>鼠标悬停柱状图会显示详细数据信息</li>
        <li>点击刷新动态生成随机数据，重新渲染图表</li>
    </ol>
    <div class="box">
        <!--控制头-->
        <div class="controls">
            <ul class="state" id="imgBox">
                <li>能耗对比</li>
                <li>×</li>
                <li id="reload">刷新</li>
            </ul>
        </div>
        <!--表格主体-->
        <div id="main" style="width:600px;height:400px;">
        </div>
    </div>
    <script src="./lib/echarts-all.js"></script>
    <script>
    var myChart = echarts.init(document.getElementById('main'));
    var reload = document.getElementById("reload")
    var newData = [];

    var option = {
        tooltip: {
            trigger: 'axis'
        },
        calculable: true,
        //            legend: {
        //                data: ['能耗']
        //            },
        xAxis: [{
            type: 'category',
            data: ['1', '5', '11', '17', '23', '24']
        }],
        yAxis: [{
            type: 'value',
            name: '能耗',
            axisLabel: {
                formatter: '{value} w'
            }
        }, {
            type: 'value',
            name: '能耗',
            axisLabel: {
                formatter: '{value} w'
            }
        }],
        series: [{
            name: '能耗',
            type: 'bar',
            //                    smooth:true,
            //140 190 100 60
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                            '#f58c37', '#f14945', '#5ebda0', '#348ea9'
                        ];
                        return colorList[params.dataIndex]
                    }
                }
            },
            data: [0, 140, 190, 100, 60, 0]
        }, {
            name: '能耗',
            type: 'line',
            smooth: true,
            itemStyle: {
                normal: {
                    areaStyle: {
                        type: 'default'
                    },
                    color: "#2dd",
                    areaStyle: {
                        color: "rgba(68,100,152,0.6)"
                    },
                    label: {
                        show: true,
                        formatter: null,
                        textStyle: {
                            color: "white",
                            align: "center",
                            baseline: "middle",
                            fontFamily: 'Arial, Verdana, sans...',
                            fontSize: 20,
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                        }
                    },
                },

            },
            yAxisIndex: 1,
            //                    data: [0, 140, 190, 100, 60, 0]
            data: [0, 140, 190, 100, 60, 0]
        }]
    };
    //    创建假数据进行展示，通过点击右上角的刷新按钮，可以改变图上的数据。可通过随机数和定时器实现。
    reload.onclick = function() {
        for (var i = 0; i < 4; i++) {
            var num = parseInt(Math.random() * 200);
            newData[i] = num;
        }
        option.series[0].data = newData;
        option.series[1].data = newData;
        myChart.setOption(option);
    }
    myChart.setOption(option);
    </script>
</body>

</html>
